<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
	<script src="js/jquery-3.3.1.min.js"></script>
    <script>
	  //JS睡眠sleep()
	    function sleep(numberMillis) {
	        var now = new Date();
	        var exitTime = now.getTime() + numberMillis;
	        while (true) {
	            now = new Date();
	            if (now.getTime() > exitTime){
	                return;
	            }
	        }
	    }

    
       function doCheck() {
            //获取username文本输入框的值
            var username = $("#username").val();
            var password=$("#password").val();
            			//发送ajax请求
			            $.post("login",{username:username,password:password},function (data) {
			                //判断userExsit键的值是否是true
			                //alert(data);
			                var span = $("#message");
							
			                if(data=="true"){
			                    //用户存在
			                    //alert("存在");
			                    span.css("color","green");
			                    span.html("登录成功");
			                    //sleep(3000);
			                    window.location.replace('main');
			                }else{
			                    //用户名不存在
			                    span.css("color","red");
			                    span.html("用户名或密码错误，登录失败！");
			                }
			            },"text");
        }
    </script>
</head>
<body>
	<div align="center">
        <h1>登录</h1>
        <form>
            用户名：<input type="text" id="username" placeholder="用户名" name="username">
            <br>
            <br>
            密码：&nbsp&nbsp&nbsp<input type="password" id="password" placeholder="密码" name="password"/>
            <br>
            <br>
            <input type="button" value="登录" onclick="doCheck();">
            <br>
            <h2><div id="message"></div></h2>
        </form>
     </div>   
</body>

</html>